<template>
  <div class="win-opt no-drag">
    <div
      v-if="showSetTop"
      class="icon"
      :title="isTop ? '取消置顶' : '置顶'"
      :class="['iconfont icon-tuding', isTop ? 'is-pinned' : '']"
      @click="togglePin"
    ></div>

    <div
      v-if="showMin"
      class="iconfont icon-2zuixiaohua-1 icon"
      title="最小化"
      @click="minimizeWindow"
    ></div>

    <div
      v-if="showMax"
      class="icon"
      :class="['iconfont', isMax ? 'icon-24gl-minimize' : 'icon-quanping']"
      :title="isMax ? '向下还原' : '最大化'"
      @click="toggleFullScreen"
    ></div>

    <div
      v-if="showClose"
      class="iconfont icon-guanbi icon close"
      title="关闭"
      @click="closeWindow"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  showSetTop: {
    type: Boolean,
    default: false,
  },
  showMin: {
    type: Boolean,
    default: true,
  },
  showMax: {
    type: Boolean,
    default: true,
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  //关闭类型 0:关闭，1:隐藏
  closeType: {
    type: Number,
    default: 1,
  },
});

const isTop = ref(false);
const isMax = ref(false);

// 窗口操作
const winOperate = (action: any, data?: any) => {
  window.ipcRenderer.winTitleOp(action, data);
};

// 固定图钉
const togglePin = () => {
  isTop.value = !isTop.value;
  winOperate('top', { top: isTop.value });
};

// 最小化
const minimizeWindow = () => {
  winOperate('minimize');
};

// 全屏操作
const toggleFullScreen = () => {
  if (isMax.value) {
    winOperate('unmaximize');
    isMax.value = false;
  } else {
    winOperate('maximize');
    isMax.value = true;
  }
};

// 关闭窗口
const closeWindow = () => {
  winOperate('close', { closeType: props.closeType });
};
</script>

<style scoped lang="scss">
.win-opt {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  display: flex;
  align-items: center;
  .icon {
    width: 33px;
    height: 25px;
    // margin: ;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #494949;

    &:hover {
      background-color: #e2e2e2;
      cursor: pointer;
    }

    &:active {
      background-color: #d1d1d1;
    }

    &.close:hover {
      background-color: #fb7373;
    }

    &.is-pinned {
      background-color: #d0d0d0;
      color: #06b258;
    }

    span {
      font-size: 12px;
    }
  }
}
</style>
